<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html,
      body {
        margin: 0;
      }
      .color1 {
        color: #e60012;
      }
      .color2 {
        color: #eb6100;
      }
      .color3 {
        color: #f39800;
      }
      .color4 {
        color: #fcc800;
      }
      .color5 {
        color: #fff100;
      }
      .color6 {
        color: #cfdb00;
      }
      .color7 {
        color: #8fc31f;
      }
      .color8 {
        color: #22ac38;
      }
      .color9 {
        color: #009944;
      }
      .color10 {
        color: #009b6b;
      }
      .color11 {
        color: #009e96;
      }
      .color12 {
        color: #00a0c1;
      }
      .color13 {
        color: #00a0e9;
      }
      .color14 {
        color: #0086d1;
      }
      .color15 {
        color: #0068b7;
      }
      .color16 {
        color: #00479d;
      }
      .color17 {
        color: #1d2088;
      }
      .color18 {
        color: #601986;
      }
      .color19 {
        color: #920783;
      }
      .color20 {
        color: #be0081;
      }
      .color21 {
        color: #e4007f;
      }
      .color22 {
        color: #e5006a;
      }
      .color23 {
        color: #e5004f;
      }
      .color24 {
        color: #e60033;
      }
      .word {
        font-size: 20px;
      }
      .content {
        text-align: center;
        font-size: 0;
      }
      .blink {
        font-size: 20px;
        animation: fade 500ms infinite;
        -webkit-animation: fade 500ms infinite;
      }
      @keyframes fade {
        from {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <div class="content">
      <span class="word color23">h</span>
      <span class="word color22">e</span>
      <span class="word color4">l</span>
      <span class="word color24">l</span>
      <span class="word color17">o</span>
      <span class="word color2">&nbsp;</span>
      <span class="word color9">w</span>
      <span class="word color3">o</span>
      <span class="word color1">r</span>
      <span class="word color23">l</span>
      <span class="word color15">d</span>
      <br />
      <span class="word color15">你</span>
      <span class="word color13">好</span>
      <span class="word color16">世</span>
      <span class="word color19">界</span>
      <span class="blink" id="jsBlink">|</span>
    </div>
    <script type="text/javascript">
      // 页面上存在id为jsBlink的下划线闪动节点，请按照如下需求实现 output 函数
      // 1、函数 output 接收一个字符串参数，每隔200毫秒在闪动节点之前逐个显示字符
      // 2、请新建 span节点放置每个字符，其中span必须存在class "word"，并随机加上 color1 ~ color24 中的任一个class（请使用系统随机函数）
      // 3、每次输出指定字符串前，请将闪动节点之前的所有其他节点移除
      // 4、不要销毁或者重新创建闪动节点
      // 5、如果输出字符为空格、<、>，请分别对其进行HTML转义，如果是\n请直接输出<br />，其他字符不需要做处理
      // 6、请不要手动调用output函数
      // 7、当前界面为系统执行 output('hello world\n你好世界') 之后，最终的界面，过程请参考以下图片
      // 8、请不要手动修改html和css
      // 9、不要使用第三方插件
      // 10、请使用ES5语法
      function createSpan(spanStr) {
        const spanDom = document.createElement('span')
        spanDom.classList.add('word')
        // 生成 1-24 随机索引
        const radomIdx = Math.round(Math.random() * 23) + 1
        spanDom.classList.add(`color${radomIdx}`)
        spanDom.innerText = spanStr
        if (spanStr === ' ') {
          spanDom.innerHTML = '&nbsp;'
        }
        if (spanStr === '<') {
          spanDom.innerHTML = '&lt;'
        }
        if (spanStr === '>') {
          spanDom.innerHTML = '&gt;'
        }
        
        return spanDom
      }
      function output(str) {
        // 3 移除闪动节点之前的所有其他节点
        const flashDom = document.querySelector('.content')
        while(flashDom.children.length > 1) {
          if (flashDom.children[0].id !== 'jsBlink') {
            flashDom.children[0].remove()
          }
        }
        // 获取闪动的 dom
        const jsBlink = document.getElementById('jsBlink')
        // 字符串索引
        let strIdx = 0
        let targetStr = str[strIdx]
        let el = null
        const intervalIdx = setInterval(() => {
          if (targetStr === '\n') {
            el = document.createElement('br')
          } else {
            el = createSpan(targetStr)
          }
          strIdx++
          targetStr = str[strIdx]
          flashDom.insertBefore(el, jsBlink)
          if (strIdx >= str.length) {
            // 最后一个字符清空定时器
            clearInterval(intervalIdx)
          }
        }, 200)
      }
      // output('hello world \n 你好世界')
    </script>
  </body>
</html>
